<template>
  <section class="section-padding">
    <div class="container-custom">
      <!-- 标题区域 -->
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
          客户
          <span class="text-primary-600">评价</span>
        </h2>
        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
          听听我们的客户怎么说，他们的成功就是我们的动力。
        </p>
      </div>
      
      <!-- 评价轮播 -->
      <div class="relative">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div 
            v-for="testimonial in testimonials" 
            :key="testimonial.id"
            class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow duration-300"
          >
            <!-- 评分 -->
            <div class="flex items-center mb-4">
              <div class="flex space-x-1">
                <svg 
                  v-for="i in 5" 
                  :key="i"
                  class="w-5 h-5 text-yellow-400" 
                  fill="currentColor" 
                  viewBox="0 0 20 20"
                >
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
              </div>
            </div>
            
            <!-- 评价内容 -->
            <blockquote class="text-gray-600 mb-6 leading-relaxed">
              "{{ testimonial.content }}"
            </blockquote>
            
            <!-- 客户信息 -->
            <div class="flex items-center">
              <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mr-4">
                <span class="text-primary-600 font-semibold">{{ testimonial.name.charAt(0) }}</span>
              </div>
              <div>
                <div class="font-semibold text-gray-900">{{ testimonial.name }}</div>
                <div class="text-sm text-gray-600">{{ testimonial.position }}</div>
                <div class="text-sm text-primary-600">{{ testimonial.company }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const testimonials = [
  {
    id: 1,
    name: '王总',
    position: 'CEO',
    company: '创新科技有限公司',
    content: '乐在企业的技术团队非常专业，他们帮助我们完成了复杂的系统集成项目，项目按时交付，质量超出预期。'
  },
  {
    id: 2,
    name: '李经理',
    position: '技术总监',
    company: '智能制造集团',
    content: '与乐在企业合作非常愉快，他们的技术实力强，服务态度好，是我们长期信赖的技术合作伙伴。'
  },
  {
    id: 3,
    name: '张主任',
    position: '信息部主任',
    company: '大型制造企业',
    content: '乐在企业提供的数字化解决方案帮助我们大幅提升了工作效率，系统运行稳定，维护服务也很及时。'
  },
  {
    id: 4,
    name: '陈总',
    position: '总经理',
    company: '电商平台',
    content: '从项目咨询到实施完成，乐在企业全程提供了专业的技术支持，项目效果显著，客户满意度大幅提升。'
  },
  {
    id: 5,
    name: '刘总监',
    position: '运营总监',
    company: '金融服务公司',
    content: '乐在企业的技术团队具备丰富的行业经验，他们理解我们的业务需求，提供的解决方案非常贴合实际。'
  },
  {
    id: 6,
    name: '赵经理',
    position: '项目经理',
    company: '物流企业',
    content: '合作过程中，乐在企业展现了专业的技术能力和优秀的项目管理水平，项目进展顺利，成果令人满意。'
  }
]
</script>
